<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <div id='app'>
        {{message}} -- {{authr}}
    </div>
    <div id='app2'>
        {{message}} -- {{authr}} -- {{msg}}
    </div>
    <div id='app3'>
        {{message}}
    </div>

    <!-- 1 -->
    <!-- <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                authr: 'JohnYehyo'
            }
        });
    </script> -->

    <!-- 2 -->
    <script>
        var data = { message: 'Hello Vue!!', authr: 'JohnYehyo' }
        var vm = new Vue({
            el: '#app',
            data: data
        });
    </script>

    <!-- 3 -->
    <!-- <script>
        var data = { message: 'Hello Vue!!', authr: 'JohnYehyo' }
        var vm2 = new Vue({
            el: '#app2',
            data: data
        });
        // data.message = vm.message
        data.message = 'Hello Html!'
        vm2.authr = '叶佳楠'
        // 只有当vue实例被创建时就已经存在data中的属性才是响应式的,新加
        // 的属性改动不会触发视图更新, 如需要预留一个属性可以用如下方法
        // 为其设置一个初始值
        data.msg = 'new'

    </script> -->

    <!-- 4 -->
    <script>
        var data = { message: 'Hello Vue!!', authr: 'JohnYehyo', msg: '' }
        var vm2 = new Vue({
            el: '#app2',
            data: data
        });
        // data.message = vm.message
        data.message = 'Hello Html!'
        vm2.authr = '叶佳楠'
        // 只有当vue实例被创建时就已经存在data中的属性才是响应式的,新加
        // 的属性改动不会触发视图更新
        data.msg = 'new'
    </script>

    <!-- 5 freeze() -->
    <!-- <script>
        var data = {message: 'Hello Body!'}
        // freeze()方法会阻止修改所有属性,使相应系统无法再追踪变化
        data.freeze()
        var vm3 = new Vue({
            el: '#app3',
            data: data
        });
    </script> -->

    <!-- 6 暴露的实例属性与方法 -->
    <script>
        var data = { message: 'Hello JohnYehyo' }
        var vm4 = new Vue({
            el: '#app3',
            data: data
        });

        // 实例属性
        console.log(vm4.$data === data)
        console.log(vm4.$el === document.getElementById('app3'))

        // 实例方法 
        vm4.$watch('message', function (newValue, oldValue) {
            console.log(oldValue + '--->' + newValue )
        })

        data.message = 'Hello WML'

    </script>


</html>
</body>